<template>
    <view class="record">
		<view class="record-head">
			<text >当前跑步成绩</text>
			<text>{{score}}</text>
			<view  class="record-rules" @click="regulate()" >
				<text>评分细则</text>
			</view>
		</view>
		<view class="blank-space">
			<view class="completed-metre">
				<text>已完成(路程)</text>
				<text>{{completeDistance}}</text>
				<text>KM</text>
			</view>
			<view class="target">
				<text>目标次数</text>
				<text>{{goalTimes}}</text>
				<text>次</text>
			</view>
			<view class="completed-count">
				<text>已完成(次数)</text>
				<text>{{completeTimes}}</text>
				<text>次</text>
			</view>
		</view>
		<view class="qiun-columns" v-if="showChart">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
				<view class="qiun-title-dot-light">本周记录</view>
			</view>
			<view class="qiun-charts" >
				<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
			</view>
		</view>
    </view>
</template>
<script>
import uCharts from '../../components/u-charts/u-charts.js';
import recordApi from '../../http/api/recordData.js'
var _self;
var canvaColumn=null;
export default {
    data() {
        return {
			cWidth:'',
			cHeight:'',
			pixelRatio:1,
			serverData:'',
			chartData: {
				categories: [],
				series: [{
					name: "跑步路程（m）",
					data: []
				}]
			},
			score:"",
			completeDistance:"",
			completeTimes:"",
			goalTimes:"",
			showChart: true ,//重载图表,
			testData:[]
        }
    },
	onLoad() {
		_self = this;
		this.cWidth=uni.upx2px(750);
		this.cHeight=uni.upx2px(500);
		this.getRecordData();
		uni.$on("initData",()=>{
			this.getRecordData()
		});
	},
    methods: {
		/* 获取本周跑步数据 */
		getRecordData() {
			const that = this;
			let sid = "";
			let wid = "";
			that.chartData.categories=[];
			that.chartData.series[0].data=[]; 
			uni.getStorage({
				key: "currentWeek",
				success(res) {
					wid = res.data.wid;
					let userInfo = that.$store.state.userInfo;
					sid = userInfo.userId;
					let params = {
						sid: sid,
						wid: wid
					}
					recordApi.runningData(params).then(res => {
						if(res.data.code ==200){
							let week = [];
							let step = [];
							res.data.data.runStatistic.forEach((item,index)=>{
								week.push(item.weekDays);
								step.push(item.mileage);
							})
							that.chartData.categories = week;
							that.chartData.series[0].data = step;
							that.initData()
							that.goalTimes = res.data.data.minresult;
							that.completeDistance = (res.data.data.ALlMileage/1000);
							that.score = res.data.data.srun;
							that.completeTimes = res.data.data.snt;
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1500
							})
						}
					})
				}
			});
		},
		/*渲染表格的方法 */
        initData:function () {
			canvaColumn = new uCharts({
				$this:_self,
				canvasId: 'canvasColumn',
				type: 'column',
				legend:{show:true},
				fontSize:11,
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				animation: true,
				categories: _self.dynamicCategories,
				series: _self.dynamicSeries,
				xAxis: {
					disableGrid:true,
				},
				yAxis: {
					//disabled:true
				},
				dataLabel: true,
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				extra: {
					column: {
						type:'group',
						width: _self.cWidth*_self.pixelRatio*0.45/_self.chartData.categories.length
					}
				  }
			})
        },
        touchColumn(e){
			canvaColumn.showToolTip(e, {
				format: function (item, category) {
					if(typeof item.data === 'object'){
						return category + ' ' + item.name + ':' + item.data.value 
					}else{
						return category + ' ' + item.name + ':' + item.data 
					}
				}
			});
		},
		/*跳转规则页面 */
		regulate(){
			uni.navigateTo({
				url: './regulation'
			})
		},
    },
    onShow:function(){
        _self.initData();
    },
	computed:{
		dynamicCategories: function() {
			return this.chartData.categories;
		},
		dynamicSeries: function() {
			return this.chartData.series;
		}
	}
}
</script>

<style>
page,.record{width: 100%;height: 100%; background:#F2F2F2;overflow-x: hidden;}
.record-head {
	width: 100%;
	height: 280px;
	padding-top: 60px;
	color: #FFFFFF;
	text-align: center;
	background-color: #409EFF;
	box-sizing: border-box;
}
.record-head text {
	display: block;
}
.record-head>text:nth-child(1) {
	padding-top: 20px;
	font-size: 24px;
}
.record-head>text:nth-child(2) {
	padding-top: 20px;
	font-size: 36px;
	font-weight: 600;
}
.record-rules {
	width: 100px;
	height: 30px;
	line-height: 30px;
	margin: 30px auto;
	font-size: 18px;
	color: #409EFF;
	background-color: #FFFFFF;
	border-radius: 5px;
}
.blank-space {
	display: flex;
	width: 100%;
	min-height: calc(100% - 580px);
	padding-top: 10px;
	box-sizing: border-box;
}
.blank-space>view {
	flex: 1;
	height: 120px;
	margin: auto 5px;
	padding: 10px 0;
	font-size: 16px;
	text-align: center;
	background-color: #FFFFFF;
	border: 2px solid #409EFF;
	border-radius: 5px;
	box-sizing: border-box;
}
.blank-space>view>text {
	display: block;
	margin-top: 5PX;
	font-size: 14px;
	color: #606266;
}
.blank-space>view>text:nth-child(2) {
	font-size: 24px;
	color: #303133;
}
.qiun-wrap{display:flex; flex-wrap:wrap;}
.qiun-rows{display:flex; flex-direction:row !important;}
.qiun-columns{display:flex;height: 300px; box-sizing: border-box;flex-direction:column !important;}
.qiun-common-mt{margin-top:10px;}
.qiun-bg-white{background:#FFFFFF;}
.qiun-title-bar{padding:5px 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{border-left: 5px solid #0ea391; padding-left: 5px; font-size: 32upx;color: #000000}
.qiun-charts{width: 100%; height:250px;padding-top:5px;background-color: #FFFFFF;}
.charts{width: 100%; height:250px;background-color: #FFFFFF;}
</style>
